<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Gradients</title>
    <style>
        div {
            border: 1px solid black;
            margin: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
        }

        .rect {
            width: 400px;
            height: 225px;
        }

        .grad-0 {
            background-image: linear-gradient(to top, red, yellow);
        }

        .grad-1 {
            background-image: linear-gradient(to bottom, red, yellow);
        }

        .grad-2 {
            background-image: linear-gradient(to left, red, yellow);
        }

        .grad-3 {
            background-image: linear-gradient(to right, red, yellow);
        }

        .grad-4 {
            background-image: linear-gradient(to top, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(to bottom, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(to left, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
        }

        .grad-5 {
            background-image: linear-gradient(to top, blue, 30%, orange, 10%, red);
        }

        .grad-6 {
            background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red);
        }

        .grad-7 {
            width: 400px;
            height: 225px;
            background-image: linear-gradient(to right, red 0%, black 20%, yellow 60%, cyan 100%);
        }

        .grad-8 {
            background-image: linear-gradient(
                to right,
                red,
                #f06d06,
                rgb(255, 255, 0),
                green
                );
        }

        .grad-9 {
            background: linear-gradient(135deg, #f2f2f2 25%, transparent 25%) -20px 0,
                        linear-gradient(225deg, #f2f2f2 25%, transparent 25%) -20px 0,
                        linear-gradient(315deg, #f2f2f2 25%, transparent 25%),
                        linear-gradient(45deg, #f2f2f2 25%, transparent 25%);
            background-size: 40px 40px;
            background-color: #50e3c2;
        }

        .grad-10 {
            background-image: linear-gradient(90deg, red, transparent, blue);
        }

        .grad-11 {
            background-image: linear-gradient(to top right, indigo, white, deeppink);
        }

        .grad-12 {
            background-image: linear-gradient(to top left, indigo, white, deeppink);
        }

        .grad-13 {
            background-image: linear-gradient(to bottom left, indigo, white, deeppink);
        }

        .grad-14 {
            background-image: linear-gradient(to bottom right,  indigo, white, deeppink);
        }

        .grad-webkit {
            background-image: -webkit-linear-gradient(top right, yellow, black, yellow, black);
        }

        .grad-15 {
            background-image: linear-gradient(to top left, red, green, blue);
            background-size: 30px 30px;
        }

        .grad-hints {
            background-image: linear-gradient(to right, hotpink, 50%, rebeccapurple);
        }

        .grad-rainbow {
            background-image: linear-gradient(
                to right,
                tomato,
                25%,
                orange 0,
                50%,
                yellowgreen 0,
                75%,
                dodgerblue 0)
        }

        .grad-repeat-0 {
            background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
        }

        .grad-repeat-1 {
            background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
        }

        .grad-repeat-2 {
            background-image: repeating-linear-gradient(transparent, #4d9f0c 40px),
                              repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
        }

        .grad-repeat-3 {
            background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
        }

        .grad-double-position {
            background-image: linear-gradient(to right,red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)
        }

        .grad-conic-1 {
            background-image: conic-gradient(red, orange, yellow, green, blue);
        }

        .grad-conic-2 {
            background-image: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1);
        }

        .grad-conic-3 {
            background-image: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);
        }

        .grad-conic-4 {
            background-image: conic-gradient(
                red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
                green 45deg 110deg, blue 110deg 200deg, purple 200deg);
        }

        .grad-conic-5 {
            background-image: conic-gradient(at 60% 45%, red, yellow, green);
        }

        .grad-conic-6 {
            background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
        }

        .grad-conic-repeat-1 {
            background-image: repeating-conic-gradient(
                red 0%,
                yellow 15%,
                red 33%
            );
        }

        .grad-conic-repeat-2 {
            background-image: repeating-conic-gradient(
                from 45deg at 10% 50%,
                brown 0deg 10deg,
                darkgoldenrod 10deg 20deg,
                chocolate 20deg 30deg
            );
        }

        .grad-radial-1 {
            background-image: radial-gradient(#e66465, #9198e5);
        }

        .grad-radial-2 {
            background-image: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
        }

        .grad-radial-3 {
            background-image: radial-gradient(circle at 100px, #333, #333 50%, #eee 75%, #333 75%);
        }

        .grad-radial-4 {
            background-image: radial-gradient(200px 100px ellipse at 25% 50%, yellow, #009966, purple);
        }

        .grad-radial-repeat-1 {
            background-image: repeating-radial-gradient(#e66465, #9198e5 20%);
        }

        .grad-radial-repeat-2 {
            background-image: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
        }

        .grad-radial-repeat-3 {
            background-image: repeating-radial-gradient(circle at 100%, #333, #333 10px, #eee 10px, #eee 20px);
        }
    </style>
  </head>
  <body>
    <h1>Gradients!</h1>
    <b>Simple gradients:</b><br/>
    <div class="box grad-0"></div>
    <div class="box grad-1"></div>
    <div class="box grad-2"></div>
    <div class="box grad-3"></div>
    <div class="box grad-4"></div>
    <b>Funky transition hints:</b><br>
    <div class="box grad-5"></div>
    <div class="box grad-6"></div>
    <div class="box grad-rainbow"></div>
    <b>Transition hint test (click to animate):</b><br>
    <div id="gradient-hints" class="box grad-hints"></div>
    <b>Multiple color stops + arbitrary angles (click to spin!):</b><br>
    <div id="gradient-spin" class="rect grad-7"></div>
    <b>Default color stops:</b><br>
    <div class="box grad-8"></div>
    <b>Cool pattern demo</b><br>
    <div class="box grad-9"></div>
    <b>Pre-multiplied alpha mixing test:</b><br>
    <div class="box grad-10"></div>
    <b>To corner:</b><br>
    <div class="rect grad-11"></div>
    <div class="rect grad-12"></div>
    <div class="rect grad-13"></div>
    <div class="rect grad-14"></div>
    <b>With background size:</b><br>
    <div class="rect grad-15"></div>
    <b>A webkit gradient</b><br>
    <div class="box grad-webkit"></div>
    <b>Repeating gradients</b><br>
    <div class="box grad-repeat-0"></div>
    <div class="box grad-repeat-1"></div>
    <div class="box grad-repeat-2"></div>
    <div class="box grad-repeat-3"></div>
    <b>Double-position color stops</b><br>
    <div class="box grad-double-position"></div>
    <b>Conic gradients</b><br>
    <div class="box grad-conic-1"></div>
    <div class="box grad-conic-2"></div>
    <div class="box grad-conic-3"></div>
    <div class="box grad-conic-4"></div>
    <div class="box grad-conic-5"></div>
    <div class="box grad-conic-6"></div>
    <b>Repeating conic gradients</b><br>
    <div class="box grad-conic-repeat-1"></div>
    <div class="box grad-conic-repeat-2"></div>
    <b>Radial gradients</b><br>
    <div class="rect grad-radial-1"></div>
    <div class="rect grad-radial-2"></div>
    <div class="rect grad-radial-3"></div>
    <div class="rect grad-radial-4"></div>
    <b>Repeating radial gradients</b><br>
    <div class="rect grad-radial-repeat-1"></div>
    <div class="rect grad-radial-repeat-2"></div>
    <div class="rect grad-radial-repeat-3"></div>
  </body>
  <script>
    const boxes = document.querySelectorAll(".box, .rect");
    const backgroundMap = {};
    for (const rule of document.styleSheets[0].cssRules) {
        backgroundMap[rule.selectorText] = rule.style.backgroundImage;
    }

    // Extract backgroundImage CSS and place above each box
    updateLabels = () => {
        boxes.forEach(box => {
            const grad = box.classList[1];
            const cssText = backgroundMap['.'+grad];
            let el = document.getElementById(grad);
            let newEl = document.createElement('code');
            let text = document.createTextNode(box.style.backgroundImage || cssText);
            newEl.appendChild(text);
            newEl.id = grad;
            if (!el)
                box.parentNode.insertBefore(newEl, box)
            else
                box.parentNode.replaceChild(newEl, el);
        })
    }

    const backgroundAnimateDemo = (id, newBackgroundCallback) => {
        const el = document.getElementById(id);
        let t = 0;
        let demoIntervalId = -1;
        el.onclick = () => {
            if (demoIntervalId <= -1) {
                demoIntervalId = setInterval(() => {
                    el.style.backgroundImage = newBackgroundCallback(t);
                    t += 1;
                    updateLabels();
                }, 100)
            }  else {
                clearInterval(demoIntervalId);
                demoIntervalId = -1;
            }
        }
    }

    // Spinning gradient demo/test
    backgroundAnimateDemo("gradient-spin", angle => `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`)

    // Transition hints demo
    backgroundAnimateDemo("gradient-hints", t => `linear-gradient(to right, hotpink, ${((Math.sin(t/4)+1)*50)|0}%, rebeccapurple)`)

    updateLabels();
  </script>
</html>
